<!--
 * @Author: 冯尚新 fengshangxin@yunjinhz.com
 * @Date: 2023-05-23 10:51:57
 * @LastEditors: 冯尚新 fengshangxin@yunjinhz.com
 * @LastEditTime: 2023-05-30 20:52:24
 * @FilePath: \zmglpt-ui-mobile-v1.1\dev\pages\intelligence\intelligenceFilesInfo\facsimileArchives.vue
 * @Description: 面单档案详情
-->
<template>
  <view class="page">
    <!-- #ifdef H5-ONLY -->
    <theme-navbar title="面单档案维护">
    </theme-navbar>
    <!-- #endif -->
    <view class="content content-bg ifn-content" style="background-color: white">
      <u-form
        class="u-form-m"
        :label-style="labelStyle"
        :model="baseInfo"
        :error-type="['border-bottom', 'message',]"
        label-width="auto"
        label-position="top"
        ref="uForm"
      >
        <u-form-item label="面单号" prop="billCode">
          <u-input
            v-model="baseInfo.billCode"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="登记单位" :required="true">
          <u-input
            :disabled="true"
            v-model="baseInfo.orgName"
          >
          </u-input>
        </u-form-item>
        <u-form-item label="快递公司">
          <u-input
            v-model="baseInfo.expressCompanyName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="所属快递公司">
          <u-input
            v-model="baseInfo.getPerson"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="包装数量">
          <u-input
            v-model="baseInfo.packageNum"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="查获人">
          <u-input
            v-model="baseInfo.getPerson"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="查获人电话">
          <u-input
            v-model="baseInfo.getPersonTel"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="包装形式">
          <u-input
            v-model="baseInfo.packageStyle"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="配送地址">
          <u-input
            v-model="baseInfo.distributionAddr"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <u-form-item label="查获地址">
          <u-input
            v-model="baseInfo.provCityCountyName"
            :disabled="true"
            placeholder=""
          >
          </u-input>
        </u-form-item>
        <view class="u-form">
          <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color" class="mg-lr-16"></u-gap>
          <fsection :title="title.sendInformation" :customStyle="customConStyle"></fsection>
        </view>
        <u-form-item label="发件人">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.sender">
          </u-input>
        </u-form-item>
        <u-form-item label="发件人电话">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.sendTel">
          </u-input>
        </u-form-item>
        <u-form-item label="发件时间">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.sendTime">
          </u-input>
        </u-form-item>
        <u-form-item label="寄件网点">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.sendSite">
          </u-input>
        </u-form-item>
        <u-form-item label="发件地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.issueName">
          </u-input>
        </u-form-item>
        <u-form-item label="发件人详细地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.sendAddress">
          </u-input>
        </u-form-item>
        <view class="u-form">
          <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color" class="mg-lr-16"></u-gap>
          <fsection title="揽件信息" :customStyle="customConStyle"></fsection>
        </view>
        <u-form-item label="揽件人">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.packager">
          </u-input>
        </u-form-item>
        <u-form-item label="揽件人电话">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.packagerTel">
          </u-input>
        </u-form-item>
        <u-form-item label="揽件人站点">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.packagerSite">
          </u-input>
        </u-form-item>
        <u-form-item label="揽件时间">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.packagerTime">
          </u-input>
        </u-form-item>
        <view class="u-form">
          <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color" class="mg-lr-16"></u-gap>
          <fsection title="派件信息" :customStyle="customConStyle"></fsection>
        </view>
        <u-form-item label="派件人">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.dispatcher">
          </u-input>
        </u-form-item>
        <u-form-item label="派件人电话">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.dispatcherTel">
          </u-input>
        </u-form-item>
        <u-form-item label="派件时间">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.dispatcherTime">
          </u-input>
        </u-form-item>
        <u-form-item label="派件人地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.dispatchName">
          </u-input>
        </u-form-item>
        <u-form-item label="派件人详细地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.dispatcherAddress">
          </u-input>
        </u-form-item>
        <view class="u-form">
          <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color" class="mg-lr-16"></u-gap>
          <fsection :title="title.receiveInformation" :customStyle="customConStyle"></fsection>
        </view>
        <u-form-item label="收件人">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiver">
          </u-input>
        </u-form-item>
        <u-form-item label="收件人电话">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiverTel">
          </u-input>
        </u-form-item>
        <u-form-item label="收件时间">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiverTime">
          </u-input>
        </u-form-item>
        <u-form-item label="收件网点">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiverSite">
          </u-input>
        </u-form-item>
        <u-form-item label="收件人地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiveName">
          </u-input>
        </u-form-item>
        <u-form-item label="收件人详细地址">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.receiverAddress">
          </u-input>
        </u-form-item>
        <u-form-item label="备注">
          <u-input :disabled="true" placeholder="" v-model="baseInfo.remark">
          </u-input>
        </u-form-item>
      </u-form>
    </view>
    <view class="content u-page">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color" class="mg-lr-16"></u-gap>
      <fsection :title="title.images" :customStyle="customStyle"></fsection>
      <view class="u-form-m pl-10">
        <m-upload
          maxCount="99"
          :file-list="imgList"
          :disabled="true"
          :deletable="false"
          upApiUrl="uploadBase64File"
          :uploadParam="{'fiGroupCode':$FILE_GROUP_TYPE.k_transport_attr}"
        >
        </m-upload>
        <u-image
          width="100%"
          v-if="!imgList.length"
          height="330rpx"
          style="padding:0 0 34rpx 14rpx"
          mode="scaleToFill"
          :src="'/static/certificate/noImg.png'"
        >
        </u-image>
      </view>
    </view>
    <view class="u-form">
      <u-gap :height="$theme.cm_section_top_gap_height" :bg-color="$theme.cm_gap_color"></u-gap>
      <fsection :title="title.caseConnect" :customStyle="customStyle"></fsection>
      <list-view
        :i="0"
        :index="0"
        :load-data="loadCase"
        :init-load="false"
        height="300px"
        :noMoreDataTipShow="false"
        ref="mescrollItem0"
        class="specailListview"
      >
        <template slot-scope="d">
          <caseConnection :connection="d.data" class="case-sty"></caseConnection>
        </template>
      </list-view>
    </view>
  </view>
</template>

<script>
import fsection from "@/components/form-section.vue";
import mUpload from "@/components/m-upload.vue";
import certificateService from "@/service/certificate/certificate.service.js";
import listView from '@/components/list_view.vue';
import intelligenceservice from "@/service/intelligence/intelligence.service";
import caseConnection from '../components/caseConnection.vue';
export default {
  components: {
    fsection,
    mUpload,
    listView,
    caseConnection,
  },
  data() {
    return {
      baseInfo: {

      },
      labelStyle: {
        fontWeight: 400,
        color: this.$theme.u_main_color,
        fontSize: '.75rem',
      },
      title:{
        images:"图片信息",
        tag:"关联产品",
        connectMsg:"面单档案详情",
        sendInformation:"发件信息",
        receiveInformation:"收件地址",
        caseConnect:"案件关联",
        connectCar:"物品信息",
        connectPerson:"关联人员",
      },
      customConStyle:{
        padding:"20rpx 0",
      },
      customStyle:{
        padding:"20rpx 32rpx",
      },
      imgList:[],
    }
  },
  onReady() {
    this.$refs.uForm.setRules(this.rules);
    this.getListViewTop();
  },
  created(){
    this.loadData();
    this.initAuditImage();
  },
  methods: {
    getListViewTop(){
      this.$u.getRect('.case-search-lay').then(res => {
        this.listViewTop = (this.$u.sys().statusBarHeight + res.top + res.height) + 'px';
      });
      this.$u.getRect('.submit-btns').then(res => {
        this.bottomOffset = (this.$u.sys().screenHeight - res.top) + "px";
      });
    },
    loadData(){
      this.baseInfo = this.getRouteParam();
      if (this.$u.test.isEmpty(this.baseInfo.getCityCode) && this.$u.test.isEmpty(this.baseInfo.getCountyCode)) {
        this.baseInfo.provCityCountyName = this.baseInfo.getProvCodeName;
      } else if (this.$u.test.isEmpty(this.baseInfo.getCountyCode)) {
        this.baseInfo.provCityCountyName = this.baseInfo.getProvCodeName + "/" + this.baseInfo.getCityCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.getCountyCode)){
        this.baseInfo.provCityCountyName = this.baseInfo.getProvCodeName + "/" + this.baseInfo.getCityCodeName + "/" + this.baseInfo.getCountyCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.getProvCode)){
        this.baseInfo.provCityCountyName = "";
      }
      if (this.$u.test.isEmpty(this.baseInfo.sendCityCode) && this.$u.test.isEmpty(this.baseInfo.sendCountyCode)) {
        this.baseInfo.issueName = this.baseInfo.sendProvCodeName;
      } else if (this.$u.test.isEmpty(this.baseInfo.sendCountyCode)) {
        this.baseInfo.issueName = this.baseInfo.sendProvCodeName + "/" + this.baseInfo.sendCityCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.sendCountyCode)){
        this.baseInfo.issueName = this.baseInfo.sendProvCodeName + "/" + this.baseInfo.sendCityCodeName + "/" + this.baseInfo.sendCountyCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.sendProvCode)){
        this.baseInfo.issueName = "";
      }
      if (this.$u.test.isEmpty(this.baseInfo.dispatcherCityCode) && this.$u.test.isEmpty(this.baseInfo.dispatcherCountyCode)) {
        this.baseInfo.dispatchName = this.baseInfo.dispatcherProvCodeName;
      } else if (this.$u.test.isEmpty(this.baseInfo.dispatcherCountyCode)) {
        this.baseInfo.dispatchName = this.baseInfo.dispatcherProvCodeName + "/" + this.baseInfo.dispatcherCityCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.dispatcherCountyCode)){
        this.baseInfo.dispatchName = this.baseInfo.dispatcherProvCodeName + "/" + this.baseInfo.dispatcherCityCodeName + "/" + this.baseInfo.dispatcherCountyCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.dispatcherProvCode)){
        this.baseInfo.dispatchName = "";
      }
      if (this.$u.test.isEmpty(this.baseInfo.receiverCityCode) && this.$u.test.isEmpty(this.baseInfo.receiverCountyCode)) {
        this.baseInfo.receiveName = this.baseInfo.receiverProvCodeName;
      } else if (this.$u.test.isEmpty(this.baseInfo.receiverCountyCode)) {
        this.baseInfo.receiveName = this.baseInfo.receiverProvCodeName + "/" + this.baseInfo.receiverCityCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.receiverCountyCode)){
        this.baseInfo.receiveName = this.baseInfo.receiverProvCodeName + "/" + this.baseInfo.receiverCityCodeName + "/" + this.baseInfo.receiverCountyCodeName;
      } else if (!this.$u.test.isEmpty(this.baseInfo.receiverProvCode)){
        this.baseInfo.receiveName = "";
      }
      try {
        this.baseInfo.sendTime = this.baseInfo.sendTime.substr(0,10);
      } catch (e) {
        this.baseInfo.sendTime = "";
      }
      try {
        this.baseInfo.packagerTime = this.baseInfo.packagerTime.substr(0,10);
      } catch (e) {
        this.baseInfo.packagerTime = "";
      }
      try {
        this.baseInfo.dispatcherTime = this.baseInfo.dispatcherTime.substr(0,10);
      } catch (e) {
        this.baseInfo.dispatcherTime = "";
      }
      try {
        this.baseInfo.receiverTime = this.baseInfo.receiverTime.substr(0,10)
      } catch (e) {
        this.baseInfo.receiverTime = "";
      }
    },
    loadCase(page){
      return new Promise((resolve,reject) => {
        let params = {
          page:page.num,
          limit:page.size,
          paras:{
            archiveUuid:this.baseInfo.uniqueKey,
            type: "person-case",
          },
        }
        intelligenceservice.archiveCaseList(params).then(res => {
          if(res.success){
            resolve({ data: {list: res.data, totalCount : res.count,},});
          }else{
            this.$modal.alert(res.msg);
            resolve({ data: {list: [], totalCount : 0,},});
          }
        }).catch(e => {
          this.$u.toast('请求失败:' + e);
          resolve({
            count: 0,
            data:[],
          });
        });
      })
    },
    initAuditImage(){
      certificateService.goFiles(this.baseInfo.uuid,this.$FILE_GROUP_TYPE.k_transport_attr).then(res => {
        if(res.success) this.imgList = res.data;
      }).catch(e => {
        console.log(e);
      })
    },
  },
}
</script>

<style scoped lang="scss">
@import "./add.scss";
.page{
  padding: 0;
}
.fsection{
    width: 75% !important;
}
.choice{
    position: relative;
    top:20rpx;
    float:right;
}
.tag{
   margin-right: 10rpx;
}
.td{
  overflow:hidden;
}
/deep/.u-td{
  height: auto !important;
}
.mg-lr-16{
  margin: 0 -32rpx !important;
}
</style>
